<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <div class="block">
                    <span class="demonstration">默认</span>
                    <el-slider v-model="value1"></el-slider>
                </div>
                <div class="block">
                    <span class="demonstration">自定义初始值</span>
                    <el-slider v-model="value2"></el-slider>
                </div>
                <div class="block">
                    <span class="demonstration">隐藏 Tooltip</span>
                    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
                </div>
                <div class="block">
                    <span class="demonstration">格式化 Tooltip</span>
                    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
                </div>
                <div class="block">
                    <span class="demonstration">禁用</span>
                    <el-slider v-model="value5" disabled></el-slider>
                </div>
            </my-simple-tr>

            <my-simple-tr label="离散值">
                <div class="block">
                    <span class="demonstration">不显示间断点</span>
                    <el-slider
                            v-model="value1"
                            :step="10">
                    </el-slider>
                </div>
                <div class="block">
                    <span class="demonstration">显示间断点</span>
                    <el-slider
                            v-model="value2"
                            :step="10"
                            show-stops>
                    </el-slider>
                </div>
            </my-simple-tr>

            <my-simple-tr label="待输入框">
                <div class="block">
                    <el-slider
                            v-model="value"
                            show-input>
                    </el-slider>
                </div>
            </my-simple-tr>

            <my-simple-tr label="选择范围">
                <div class="block">
                    <el-slider
                            v-model="values"
                            show-input range>
                    </el-slider>
                </div>
            </my-simple-tr>

            <my-simple-tr label="竖向模式">
                <div class="block">
                    <el-slider
                            v-model="values"
                            show-input range vertical height="200px">
                    </el-slider>
                </div>
            </my-simple-tr>

            <my-simple-tr label="展示标记" style="height: 100px;padding: 20px">
                <div class="block" style="padding: 20px">
                    <el-slider
                            v-model="values"
                            show-input range  height="200px" :marks="marks">
                    </el-slider>
                </div>
            </my-simple-tr>


        </my-simple-table>
    </div>
</template>

<style>

</style>

<script>

    export default {
        name: "my-el-input-number",
        data () {
            return {
                value1: 10,
                value2: 50,
                value3: 36,
                value4: 48,
                value5: 42,
                values: [24, 48],
                marks: {
                    0: '0°C',
                    8: '8°C',
                    37: '37°C',
                    50: {
                        style: {
                            color: '#1989FA'
                        },
                        label: this.$createElement('strong', '50%')
                    }
                }
            };
        },
        methods: {
            formatTooltip(val) {
                return val / 100;
            }
        }
    }
</script>

